<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>JS中的数组过滤和对象深拷贝 | Storm</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="本文借鉴了该文章  原数组 1234567let res = [    &amp;#123;name:&apos;Anne&apos;, age: 23, gender:&apos;female&apos;&amp;#125;,    &amp;#123;name:&apos;Lisa&apos;, age: 16, gender:&apos;female&apos;&amp;#125;,    &amp;#123;name:&apos;Jay&apos;, age: 19, gender:&apos;male&apos;&amp;#125;,    &amp;#123">
<meta name="keywords" content="JavaScript">
<meta property="og:type" content="article">
<meta property="og:title" content="JS中的数组过滤和对象深拷贝">
<meta property="og:url" content="https://storm4542.github.io/archives/30db5aa.html">
<meta property="og:site_name" content="Storm">
<meta property="og:description" content="本文借鉴了该文章  原数组 1234567let res = [    &amp;#123;name:&apos;Anne&apos;, age: 23, gender:&apos;female&apos;&amp;#125;,    &amp;#123;name:&apos;Lisa&apos;, age: 16, gender:&apos;female&apos;&amp;#125;,    &amp;#123;name:&apos;Jay&apos;, age: 19, gender:&apos;male&apos;&amp;#125;,    &amp;#123">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2018-10-19T02:13:54.591Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="JS中的数组过滤和对象深拷贝">
<meta name="twitter:description" content="本文借鉴了该文章  原数组 1234567let res = [    &amp;#123;name:&apos;Anne&apos;, age: 23, gender:&apos;female&apos;&amp;#125;,    &amp;#123;name:&apos;Lisa&apos;, age: 16, gender:&apos;female&apos;&amp;#125;,    &amp;#123;name:&apos;Jay&apos;, age: 19, gender:&apos;male&apos;&amp;#125;,    &amp;#123">
  
    <link rel="alternative" href="https://storm4542.github.io/atom.xml" title="Storm" type="application/atom+xml">
  
  
    <link rel="icon" href="https://storm4542.github.io/favicon.png">
  
  <link href="static/css/css.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="static/css/style.css">
  

</head></html>
<body>
  <div id="container">
    <div id="wrap">
      <div class="outer">
        <section id="main"><article id="post-JS中的数组过滤和对象深拷贝" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      JS中的数组过滤和对象深拷贝
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="" class="article-date">
  <time datetime="2018-10-19T02:13:10.000Z" itemprop="datePublished">2018-10-19</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <p>本文借鉴了该文章 </p>
<p>原数组</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> res = [</span><br><span class="line">    &#123;<span class="attr">name</span>:<span class="string">'Anne'</span>, <span class="attr">age</span>: <span class="number">23</span>, <span class="attr">gender</span>:<span class="string">'female'</span>&#125;,</span><br><span class="line">    &#123;<span class="attr">name</span>:<span class="string">'Lisa'</span>, <span class="attr">age</span>: <span class="number">16</span>, <span class="attr">gender</span>:<span class="string">'female'</span>&#125;,</span><br><span class="line">    &#123;<span class="attr">name</span>:<span class="string">'Jay'</span>, <span class="attr">age</span>: <span class="number">19</span>, <span class="attr">gender</span>:<span class="string">'male'</span>&#125;,</span><br><span class="line">    &#123;<span class="attr">name</span>:<span class="string">'Jay'</span>, <span class="attr">age</span>: <span class="number">22</span>, <span class="attr">gender</span>:<span class="string">'male'</span>&#125;,</span><br><span class="line">    &#123;<span class="attr">name</span>:<span class="string">'Mark'</span>, <span class="attr">age</span>: <span class="number">40</span>, <span class="attr">gender</span>:<span class="string">'male'</span>&#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<h4 id="1-单个条件单数据筛选"><a href="#1-单个条件单数据筛选" class="headerlink" title="1.单个条件单数据筛选"></a>1.单个条件单数据筛选</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">findOneByName</span>(<span class="params">res, name</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> res.filter(<span class="function"><span class="params">item</span> =&gt;</span> item.name === name) <span class="comment">//注意:filter返回的是数组</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(findOneByName(res,<span class="string">'Anne'</span>)) <span class="comment">// [ &#123; name: 'Anne', age: 23, gender: 'female' &#125; ]</span></span><br></pre></td></tr></table></figure>
<h4 id="2-单个条件多个数据筛选"><a href="#2-单个条件多个数据筛选" class="headerlink" title="2.单个条件多个数据筛选"></a>2.单个条件多个数据筛选</h4><p>有时候可能会遇到重名情况</p>
<p>使用 <code>forEach</code>,<code>Map</code>或<code>for</code>遍历数组，push 进入一个临时数组返回。 </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">findSomeByName</span>(<span class="params">res, name</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> result = []</span><br><span class="line">    res.forEach(<span class="function"><span class="params">e</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (e.name === name) &#123;</span><br><span class="line">            result.push(e)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> result</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(findSomeByName(res, <span class="string">'Jay'</span>)) </span><br><span class="line"><span class="comment">//[ &#123; name: 'Jay', age: 19, gender: 'male' &#125;,</span></span><br><span class="line"><span class="comment">//  &#123; name: 'Jay', age: 22, gender: 'male' &#125; ]</span></span><br></pre></td></tr></table></figure>
<h4 id="3-多个条件单个数据筛选"><a href="#3-多个条件单个数据筛选" class="headerlink" title="3.多个条件单个数据筛选"></a>3.多个条件单个数据筛选</h4><p>数据中有两个 ‘ Jay ‘，我只想要那个 22 岁的。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">findOneByNameAge</span>(<span class="params">res, name, age</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> res.filter(<span class="function"><span class="params">item</span> =&gt;</span> item.name === name &amp;&amp; item.age === age)</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(findOneByNameAge(res, <span class="string">'Jay'</span>, <span class="number">22</span>));</span><br><span class="line"><span class="comment">//[ &#123; name: 'Jay', age: 22, gender: 'male' &#125; ]</span></span><br></pre></td></tr></table></figure>
<h4 id="4-多个条件多个筛选"><a href="#4-多个条件多个筛选" class="headerlink" title="4.多个条件多个筛选"></a>4.多个条件多个筛选</h4><p>我想找到所有叫 Jay 和  Anne 的人</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">multiFilter</span>(<span class="params">array, filters</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> filterKeys = <span class="built_in">Object</span>.keys(filters)</span><br><span class="line">    <span class="comment">// filters all elements passing the criteria</span></span><br><span class="line">    <span class="keyword">return</span> array.filter(<span class="function">(<span class="params">item</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">// dynamically validate all filter criteria</span></span><br><span class="line">        <span class="keyword">return</span> filterKeys.every(<span class="function"><span class="params">key</span> =&gt;</span> &#123;</span><br><span class="line">            <span class="comment">//ignore when the filter is empty Anne</span></span><br><span class="line">            <span class="keyword">if</span> (!filters[key].length) <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line">            <span class="keyword">return</span> !!~filters[key].indexOf(item[key])</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> filter = &#123;</span><br><span class="line">    name: [<span class="string">'Jay'</span>, <span class="string">'Anne'</span>],</span><br><span class="line">    age: []</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(multiFilter(res, filter));</span><br></pre></td></tr></table></figure>
<h4 id="5-判断是否有这个人，或者是否全部都为该人"><a href="#5-判断是否有这个人，或者是否全部都为该人" class="headerlink" title="5. 判断是否有这个人，或者是否全部都为该人"></a>5. 判断是否有这个人，或者是否全部都为该人</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// res 里有没有 Anne ?</span></span><br><span class="line"><span class="built_in">console</span>.log(res.some(<span class="function"><span class="params">item</span> =&gt;</span> item.name === <span class="string">'Anne'</span>));<span class="comment">//true</span></span><br><span class="line"><span class="comment">// res 里是不是全都是 Anne ?</span></span><br><span class="line"><span class="built_in">console</span>.log(res.every(<span class="function"><span class="params">item</span> =&gt;</span> item.name === <span class="string">'Anne'</span>));<span class="comment">//false</span></span><br></pre></td></tr></table></figure>
<h4 id="6-知识点1-Object-keys-获取数据索引或者对象属性"><a href="#6-知识点1-Object-keys-获取数据索引或者对象属性" class="headerlink" title="6.知识点1 : Object.keys() 获取数据索引或者对象属性"></a>6.知识点1 : Object.keys() 获取数据索引或者对象属性</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.keys(arr)); <span class="comment">// [ '0', '1', '2' ]</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    a: <span class="string">'1'</span>,</span><br><span class="line">    b: <span class="string">'2'</span>,</span><br><span class="line">    c: <span class="string">'3'</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.keys(obj));<span class="comment">//[ 'a', 'b', 'c' ]</span></span><br></pre></td></tr></table></figure>
<h4 id="7-对象的深拷贝"><a href="#7-对象的深拷贝" class="headerlink" title="7. 对象的深拷贝"></a>7. 对象的深拷贝</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> newRes = Json.parse(Json.stringify(res)); </span><br><span class="line"><span class="comment">//数据量不大的时候使用，而且必须遵循JSON格式,假如有 function 就无法拷贝</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//递归深拷贝 o1:得到的新对象 , o2:原对象</span></span><br><span class="line"><span class="keyword">let</span> newRes = &#123;&#125; ; <span class="comment">//想得到数组</span></span><br><span class="line"><span class="keyword">let</span> newRes = [] ; <span class="comment">//想得到对象</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">deepClone</span>(<span class="params">o1, o2</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> k <span class="keyword">in</span> o2) &#123;</span><br><span class="line">        <span class="keyword">if</span> (<span class="keyword">typeof</span> o2[k] === <span class="string">'object'</span>) &#123;</span><br><span class="line">            o1[k] = &#123;&#125;;</span><br><span class="line">            deepClone(o1[k], o2[k]);</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            o1[k] = o2[k];</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">deepClone(newRes,res)</span><br></pre></td></tr></table></figure>

      

      
        
    </div>
  </div>
  
    
<nav id="article-nav">
  
    <a href="39d3351.html" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          JS引用类型
        
      </div>
    </a>
  
  
    <a href="7b89c88d.html" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">QS中文文档</div>
    </a>
  
</nav>

  
</article>


<section id="comments">
  <link rel="stylesheet" href="static/css/default.css">
  <script src="static/js/gitment.browser.js"></script>
  <script>
    var gitment = new Gitment({
      owner: 'your github account',
      repo: 'your repo',
      oauth: {
        client_id: 'your client_id',
        client_secret: 'your client_secret',
      },
    })
    gitment.render('comments')
  </script>
</section>

</section>
        <aside id="sidebar">
  <nav class="menus">
  	<ul>
  		<li><a href="index.html"><i class="icon icon-home"></i></a></li>
  		
			<li><a href="index1.html"><i class="icon icon-fenlei"></i></a></li>
  		
  		
			<li><a href="index2.html"><i class="icon icon-tag"></i></a></li>
  		
  		
  			<li><a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer"><i class="icon icon-github"></i></a></li>
  		
  	</ul>
  </nav>
  <a id="go-top" href="#"><i class="icon icon-up"></i></a>
</aside>

      </div>
      <footer id="footer">
  
	<div id="footer-info" class="inner">
	  &copy; 2019 Storm 
	  - Powered by <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Hexo</a>
	  - Theme <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Jane</a>
	</div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="index.html" class="mobile-nav-link">Home</a>
  
    <a href="index1.html" class="mobile-nav-link">Archives</a>
  
    <a href="index2.html" class="mobile-nav-link">Tag</a>
  
    <a href="javascript:;" class="mobile-nav-link" rel="external nofollow noopener noreferrer" target="_blank">Github</a>
  
</nav>
    
<script>
  var disqus_shortname = 'storm';
  
  var disqus_url = 'https://storm4542.github.io/archives/30db5aa.html';
  
  (function(){
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>


<script src="static/js/jquery.min.js"></script>


  <link rel="stylesheet" href="static/css/jquery.fancybox.css">
  <script src="static/js/jquery.fancybox.pack.js"></script>


<script src="static/js/script.js"></script>

  </div>
</body>
